<template>
<!-- 房屋管理 -->
    <div class="BuildingManagement">
        <div class="query">
             <el-select
                v-model="value2"
                multiple
                collapse-tags
                style="margin-left: 20px;"
                placeholder="请选择" class="selection">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label">
                </el-option>
            </el-select>
            <!-- 查询和重置按钮 -->
            <el-button type="primary" class="chaxun" @click="select"><i class="el-icon-search" ></i>查询</el-button>
            <el-button class="reaseat" @click="reasert"><i class="el-icon-refresh-right" ></i>重置</el-button>
        </div>
        <!-- 数据表格 -->
        <div class="datalists">
            <div class="datalistsname">数据列表</div>
            <!-- 导入数据 -->
            <!-- <el-button type="primary" class="ImportData" @click="ImportData">导入数据</el-button> -->
            <!-- 数据表格 -->
            <div class="datatable">
                <el-table
                :data="tableData"
                border
                stripe
                style="width: 100%">
                    <el-table-column
                    type="index"
                    label="序号"
                    width="49">
                    </el-table-column>
                    <el-table-column
                    prop="nickname"
                    label="昵称"
                    width="150">
                    </el-table-column>
                    <el-table-column
                    prop="PropertyName"
                    label="房产名称"
                    width="219">
                    </el-table-column>
                    <el-table-column
                    prop="householdName"
                    label="姓名"
                    width="78">
                    </el-table-column>
                    <el-table-column
                    prop="householdPhone"
                    label="手机号"
                    width="119">
                    </el-table-column>
                    <el-table-column
                    prop="householeIDcard"
                    label="身份证"
                    width="118">
                    </el-table-column>
                    <el-table-column
                    prop="householdType"
                    label="类型"
                    width="85">
                    </el-table-column>
                    <el-table-column
                    prop="BingdingDate"
                    label="绑定日期"
                    width="149">
                    </el-table-column>
                    <el-table-column
                    prop="householdState"
                    label="状态"
                    width="92">
                    </el-table-column>
                    <el-table-column
                    prop="operate"
                    label="操作"
                    width="158">
                        <template slot-scope="scope">
                            <i class="el-icon-office-building"></i>
                            <span style="margin-left: 5px;margin-right:5px" @click="building(scope.row)">{{ scope.row.examine }}</span>
                            <i class="el-icon-delete"></i>
                            <span style="margin-left: 5px;margin-right:5px" @click="del(scope.row.household_id)">{{ scope.row.del}}</span>
                        </template>
                    </el-table-column>
                    
                </el-table>
               
                <!-- 分页器 -->
                <div class="block">
                    <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage2"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="50"
                    layout=" prev, pager, next, sizes,jumper"
                    :total="totalpage">
                    </el-pagination>
                </div>
            </div>
        </div>
         <el-dialog title="住户详细信息" :visible.sync="dialogFormVisible" close="dialogbox">
            <el-form :model="form" :rules="rules" ref="form"  class="formbox" style="display:flex;flex-wrap:wrap">
                <el-form-item label="房产名称" :label-width="formLabelWidth" class="shurubox">
                    <el-input v-model="form.PropertyName" disabled autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="昵称"  :label-width="formLabelWidth" class="shurubox">
                <el-input v-model="form.nickname" disabled autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth" class="shurubox">
                <el-input v-model="form.householdName" disabled autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="住户类型" :label-width="formLabelWidth" class="shurubox">
                <el-select v-model="form.householdType" disabled placeholder="请选择活动区域" style="width:206px">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="手机号" :label-width="formLabelWidth" class="shurubox">
                <el-input v-model="form.householdPhone" disabled autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="身份证号" :label-width="formLabelWidth" class="shurubox">
                <el-input v-model="form.householeIDcard" disabled autocomplete="off" ></el-input>
                </el-form-item>
                <!-- <dir class="inmg">11111111111</dir> -->
                <el-form-item label="审核状态" prop="resource" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.resource" v-if="this.form.householdState=='待审核'">
                        <el-radio label="审核通过"></el-radio>
                        <el-radio label="审核不通过"></el-radio>
                    </el-radio-group>
                    <p v-else-if="this.form.householdState=='已拒绝'">审核不通过</p>
                    <p v-else>审核通过</p>
                </el-form-item>
                <el-form-item label="" prop="" label-width="390px" style="margin-right:20px">
                </el-form-item>
                <el-form-item label="门禁时长"  label-width="120px" v-if="this.form.householdState=='已审核'">
                    <p>{{this.form.accesscontol}}</p>
                </el-form-item>
                <el-form-item label="拒绝理由"  label-width="120px" v-if="this.form.householdState=='已拒绝'">
                    <p>{{this.form.refaulcase}}</p>
                </el-form-item>
                <el-form-item label="门禁状态" prop="accesscontol" :label-width="formLabelWidth" v-if="this.form.resource=='审核通过'">
                    <el-select v-model="form.accesscontol" placeholder="请选择门禁时长" style="width:206px" >
                        <el-option label="12小时" value="12小时"></el-option>
                        <el-option label="24小时" value="24小时"></el-option>
                        <el-option label="7天" value="7天"></el-option>
                        <el-option label="一个月" value="一个月"></el-option>
                        <el-option label="永久" value="永久"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="拒绝理由" prop="refaulcase" :label-width="formLabelWidth" v-if="this.form.resource=='审核不通过'">
                    <el-input v-model="form.refaulcase" autocomplete="off" placeholder="请输入不通过理由"></el-input>
                </el-form-item>
            </el-form>
            
            <div slot="footer" class="dialog-footer">
                <el-button @click="close('form')">取 消</el-button>
                <el-button type="primary" @click="sure('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            options: [{
            value: '选项1',
            label: '已审核'
            }, {
            value: '选项2',
            label: '待审核'
            }, {
            value: '选项3',
            label: '已拒绝'
            },],
            value2: [],
            // tableData: [
            //     {
            //         date: '1',
            //         petname: '一缕青烟',
            //         PropertyName: '幸福苑小区1号楼1单元2032',
            //         name:'赵小刚',
            //         phone:'13013001300',
            //         id:'239232****32323',
            //         type:'业主',
            //         Bindingdate:'2021-06-26 10:10',
            //         state:"待审核",
            //         edit:'审核',
            //         opertes:'删除',
            //     }, 
            //     {
            //         date: '2',
            //         petname: '一缕青烟',
            //         PropertyName: '幸福苑小区1号楼1单元2032',
            //         name:'赵小刚',
            //         phone:'13013001300',
            //         id:'239232****32323',
            //         type:'业主',
            //         Bindingdate:'2021-06-26 10:10',
            //         state:"待审核",
            //         edit:'审核',
            //         opertes:'删除',
            //     }, 
            //     {
            //         date: '2',
            //         petname: '一缕青烟',
            //         PropertyName: '幸福苑小区1号楼1单元2032',
            //         name:'赵小刚',
            //         phone:'13013001300',
            //         id:'239232****32323',
            //         type:'业主',
            //         Bindingdate:'2021-06-26 10:10',
            //         state:"待审核",
            //         edit:'审核',
            //         opertes:'删除',
            //     }, 
            //     {
            //         date: '2',
            //        petname: '一缕青烟',
            //         PropertyName: '幸福苑小区1号楼1单元2032',
            //         name:'赵小刚',
            //         phone:'13013001300',
            //         id:'239232****32323',
            //         type:'业主',
            //         Bindingdate:'2021-06-26 10:10',
            //         state:"待审核",
            //         edit:'审核',
            //         opertes:'删除',
            //     }, 
            //     {
            //         date: '2',
            //         petname: '一缕青烟',
            //         PropertyName: '幸福苑小区1号楼1单元2032',
            //         name:'赵小刚',
            //         phone:'13013001300',
            //         id:'239232****32323',
            //         type:'业主',
            //         Bindingdate:'2021-06-26 10:10',
            //         state:"待审核",
            //         edit:'审核',
            //         opertes:'删除',
            //     }, 
            //     {
            //         date: '2',
            //         petname: '一缕青烟',
            //         PropertyName: '幸福苑小区1号楼1单元2032',
            //         name:'赵小刚',
            //         phone:'13013001300',
            //         id:'239232****32323',
            //         type:'业主',
            //         Bindingdate:'2021-06-26 10:10',
            //         state:"待审核",
            //         edit:'审核',
            //         opertes:'删除',
            //     }, 
            //     {
            //         date: '2',
            //         petname: '一缕青烟',
            //         PropertyName: '幸福苑小区1号楼1单元2032',
            //         name:'赵小刚',
            //         phone:'13013001300',
            //         id:'239232****32323',
            //         type:'业主',
            //         Bindingdate:'2021-06-26 10:10',
            //         state:"待审核",
            //         edit:'审核',
            //         opertes:'删除',
            //     }, 
            //     {
            //         date: '2',
            //         petname: '一缕青烟',
            //         PropertyName: '幸福苑小区1号楼1单元2032',
            //         name:'赵小刚',
            //         phone:'13013001300',
            //         id:'239232****32323',
            //         type:'业主',
            //         Bindingdate:'2021-06-26 10:10',
            //         state:"待审核",
            //         edit:'审核',
            //         opertes:'删除',
            //     }, 
            //     {
            //         date: '2',
            //         petname: '一缕青烟',
            //         PropertyName: '幸福苑小区1号楼1单元2032',
            //         name:'赵小刚',
            //         phone:'13013001300',
            //         id:'239232****32323',
            //         type:'业主',
            //         Bindingdate:'2021-06-26 10:10',
            //         state:"待审核",
            //         edit:'审核',
            //         opertes:'删除',
            //     }, 
            //     {
            //         date: '2',
            //         petname: '一缕青烟',
            //         PropertyName: '幸福苑小区1号楼1单元2032',
            //         name:'赵小刚',
            //         phone:'13013001300',
            //         id:'239232****32323',
            //         type:'业主',
            //         Bindingdate:'2021-06-26 10:10',
            //         state:"待审核",
            //         edit:'审核',
            //         opertes:'删除',
            //     }, 
            //     {
            //         date: '2',
            //         petname: '一缕青烟',
            //         PropertyName: '幸福苑小区1号楼1单元2032',
            //         name:'赵小刚',
            //         phone:'13013001300',
            //         id:'239232****32323',
            //         type:'业主',
            //         Bindingdate:'2021-06-26 10:10',
            //         state:"待审核",
            //         edit:'审核',
            //         opertes:'删除',
            //     }, 
            //     {
            //         date: '3',
            //         petname: '一缕青烟',
            //         PropertyName: '幸福苑小区1号楼1单元2032',
            //         name:'赵小刚',
            //         phone:'13013001300',
            //         id:'239232****32323',
            //         type:'业主',
            //         Bindingdate:'2021-06-26 10:10',
            //         state:"待审核",
            //         edit:'审核',
            //         opertes:'删除',
            //     }, 
            // ],//数据表格数据
            currentPage2: 1,//分页器当前页
            dialogFormVisible: false,
            // 审核对话框
            form: {
                PropertyName:'',    //房产名称
                nickname:'',        //昵称
                householdName:'',   //姓名
                householdType:'',   //住户类型
                householdPhone:"",  //手机号
                householeIDcard:'', //身份证号
                resource: '',       //审核状态
                accesscontol:"",    //门禁状态
                refaulcase:'',      //拒绝理由
            },
            rules:{
                resource: [
                    { required: true, message: '请选择审核状态', trigger: 'change' }
                ],
                accesscontol:[
                    { required: true, message: '请选择门禁时长', trigger: 'change' }
                ],
                refaulcase:[
                    { required: true, message: '请输入不通过理由', trigger: 'blur' },
                ],
            },
            tableData:[],
            formLabelWidth: '120px',
            datalists:[],    //数据总列表
            pagelimit:10,   //每页显示多少条   
            totalpage:300,  //总页数
        }
    },
    watch:{
        currentPage2:{
            handler(val,oldval){
                console.log((val-1)*this.pagelimit,val*this.pagelimit)
                this.tableData=this.datalists.slice((val-1)*this.pagelimit,val*this.pagelimit)
            },
        },
        pagelimit:{
            handler(val,oldval){
                console.log(val,oldval)
                this.tableData=this.datalists.slice((this.currentPage2-1)*val,val*this.currentPage2)
            }
        }
    },
    mounted(){
        this.$axios.get('http://127.0.0.1/householdlist').then(res=>{
            console.log(res.data.arr)
            // this.tableData=res.data.arr
            this.datalists=res.data.arr
            this.tableData=res.data.arr.slice(0,10)
            this.totalpage=res.data.arr.length
        }).catch(err=>{
            console.log(err)
        })
    },
    methods:{
        ImportData(){
            console.log("导入数据")
        },
        select(){
            // console.log("查询")
            console.log(this.value2)
            this.tableData=[]
            this.datalists.forEach(item=>{
                this.value2.forEach(val=>{
                    if(item.householdState==val){
                        this.tableData.push(item)
                    }
                })
            })
            console.log(this.tableData)
            this.value2=[]
        },
        reasert(){
            console.log("重置")
        },
        appends(){
            console.log("批量添加")
        },
        append(){
            console.log("添加")
        },
        // 分页器打印
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pagelimit=val
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        // 数据表格中审核和删除
        building(txt){
            console.log("审核",txt)
            this.form=txt
            // this.$router.push('/about/OwnerInformations/OwnerInformation')
            this.dialogFormVisible=true
        },
        edit(){
            console.log('编辑')
        },
        del(id){
            // console.log('删除',i)
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                console.log('删除',id)
                this.$axios.post('http://127.0.0.1/householddelete',{
                    id
                }).then(res=>{
                    console.log(res)
                    // this.tableData=res.data.arr
                    this.datalists=res.data.arr
                    this.tableData=res.data.arr.slice(0,10)
                    this.totalpage=res.data.arr.length
                }).catch(err=>{
                    console.log(err)
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        view(){
            console.log('查看')
        },
        sure(formName){
            // console.log('确定',this.form.resource)
           
            if(this.form.householdState=='待审核'){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // alert('submit!');
                        this.$axios.post('http://127.0.0.1/householdupdate',{
                            ...this.form
                        }).then(res=>{
                                this.dialogFormVisible = false
                                // this.tableData=res.data.arr
                                this.datalists=res.data.arr
                                this.tableData=res.data.arr.slice(0,10)
                                this.totalpage=res.data.arr.length
                                if(this.form.resource=='审核通过'){
                                    console.log('审核通过')
                                    this.$message({
                                        message: '恭喜你，审核通过',
                                        type: 'success'
                                    });
                                }else{
                                    console.log('审核不通过')
                                    this.$message.error('错了哦，审核已拒绝');
                                }
                        }).catch(err=>{
                                console.log(err)
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }else{
                this.dialogFormVisible = false
                this.$refs[formName].resetFields();
            }
            
        },
        close(formName){
            this.dialogFormVisible = false
            this.$refs[formName].resetFields();
        }
    }
};
</script>

<style lang="scss" scoped>
    .BuildingManagement{
        width: 1260px;
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        .query{
            width: 1260px;
            height: 95px;
            display: flex;
            align-items: center;
            background-color: #fff;
            box-sizing: border-box;
            border:  1px solid rgba(233, 233, 233, 1);
            padding-left: 20px;
            position: relative;
            .selection{
                width: 405px;
                ::v-deep .el-input__inner{
                    height: 35px;
                }
            }
            // 查询按钮
            .chaxun{
                width: 80px;
                height: 35px;
                margin-left: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #0079fe !important;
                .el-icon-search{
                    font-size: 16px;
                    margin-right: 5px;
                }
            }
            .chaxun:hover{
                background-color: #66b1ff !important;
                color: #fff !important;
            }
            // 重置按钮
            .reaseat{
                width: 80px;
                height: 35px;
                margin-left: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #fff !important;
                .el-icon-refresh-right{
                    font-size: 16px;
                    margin-right: 5px;
                }
            }
            .reaseat:hover{
                border-color: #0079fe !important;
                color: #0079fe !important;
            }
            
        }
        // 数据列表
        .datalists{
            width: 1260px;
            height: 1196px;
            padding: 0 20px;
            margin-top: 10px;
            background-color: #fff;
            border: 1px solid rgba(233, 233, 233, 1);
            position: relative;
            box-sizing: border-box;
            // 数据列表名字名称
            .datalistsname{
                margin-top: 40px;
                width: 57px;
                height: 18px;
                line-height: 18px;
                color: #666666;
                font-size: 14px;
            }
            // 添加数据按钮
            .append,.appends,.ImportData{
                width: 80px;
                height: 35px;
                position: absolute;
                right: 20px;
                top: 23px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #0079fe !important;
                .el-icon-plus,.el-icon-folder-add{
                    font-size: 16px;
                    margin-right: 5px;
                    font-weight: 700;
                }
            }
            .append:hover,.appends:hover,.ImportData:hover{
                background-color: #66b1ff !important;
                color: #fff !important;
            }
            .appends{
                position: absolute;
                padding: 0 2px;
                right: 120px;
                top: 23px;
            }
            // .ImportData{
            //     position: absolute;
            //     right: 220px;
            //     top: 23px;
            // }
            // 数据表格
            .datatable{
                margin-top: 20px;
                ::v-deep .has-gutter th{
                    height: 45px !important;
                    background-color: #f5f5f5;
                    box-sizing: border-box;
                    padding: 0 !important;
                    font-size: 14px;
                    color: #666666;
                    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑' !important;
                }
                ::v-deep .el-table__row td{
                    height: 50px !important;
                    padding: 0 !important;
                }
                ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
                    background-color: #f9f9f9;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(4){
                    text-align: center !important;
                    color: #999 !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(1){
                    color: #0079fe !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-child(2){
                    color: #666 !important;
                }
                ::v-deep .el-table__row .el-table__cell:nth-last-child(1){
                    text-align: center;
                    color: #0079fe;
                    // cursor: pointer;
                }
                ::v-deep .el-table__row .el-table__cell:nth-last-child(1) span:hover{
                    cursor: pointer;
                    text-decoration: underline !important;
                    // color: #4a4a4a;
                }
                ::v-deep .el-table__row .el-table__cell{
                    color: #666666;
                    font-size: 12px;
                }
                ::v-deep .el-table__row:hover{
                    background-color: inherit !important;
                }
                
                // 分页
                .block{
                    display: flex;
                    justify-content: end;
                    ::v-deep .el-pagination__sizes{
                        margin-left: 10px;
                        width: 80px;
                        height: 35px;
                        line-height: 35px;
                    }
                    ::v-deep .btn-prev,::v-deep .el-pager li,::v-deep .btn-next{
                        width: 35px;
                        height: 35px;
                        line-height: 35px;
                        background-color: #fff;
                        border: 1px solid rgba(228, 228, 228, 1);
                    }
                    ::v-deep .el-pager .active{
                        background-color: #0079fe !important;
                    }
                    ::v-deep .el-pager .active:hover{
                        color: #fff !important;
                        border: 1px solid rgb(228, 228, 228) !important;
                        box-sizing: border-box;
                    }
                    ::v-deep .el-pager li:hover,::v-deep .btn-prev:hover,::v-deep .btn-next:hover,::v-deep  .el-pagination__sizes .el-input .el-input__inner:hover {
                        border-color: #0079fe;
                        color: #0079fe;
                    }
                    ::v-deep .el-input--mini .el-input__inner,::v-deep .el-input--mini .el-input__icon {
                        height: 35px;
                        line-height: 35px;
                    }
                    ::v-deep .el-pagination .el-select .el-input {
                        width: 86px;
                        margin: 0 5px;
                    }
                    ::v-deep .el-pagination__jump{
                        height: 35px;
                        line-height: 35px;
                    }
                    ::v-deep .el-input__inner:focus {
                        border-color: rgb(228, 228, 228) !important;
                        outline: 0;
                    }
                }
            }
            
        }
        // 对话框
        ::v-deep .dialogbox{
            width: 100% !important;
            ::v-deep .formbox{
                display: flex !important;
                    .inmg{
                    margin-left: 50px;
                }
            }
            ::v-deep .el-input__inner{
                width: 206px;
            }
            
        }
    }
     

</style>